<template>
  <div>
    <div style="min-height: 50px;margin-bottom: 15px;">
      <div style="margin-bottom:5px;display: block;font-size: 17px;font-weight: 1000;">{{$t('analyze.zhengyao')}}：
        <el-button size="mini" icon="el-icon-plus" style="float: right;margin-right: 20px;" @click="addTag('政要')">{{$t('analyze.add')}}</el-button>
      </div>
      <a-tag style="margin-top: 5px;" closable @close="log(item,'政要',index)" v-for="(item,index) in tagList.political" :key="index">{{ item }}</a-tag>
    </div>
    <el-divider></el-divider>
    <div style="min-height: 50px;margin-bottom: 15px;">
      <div style="margin-bottom:5px;display: block;font-size: 17px;font-weight: 1000;">{{$t('analyze.fimaly')}}：
        <el-button size="mini" icon="el-icon-plus" style="float: right;margin-right: 20px;" @click="addTag('家族')">{{$t('analyze.add')}}</el-button>
      </div>
      <a-tag style="margin-top: 5px;" closable @close="log(item,'家族',index)" v-for="(item,index) in tagList.family" :key="index">{{ item }}</a-tag>
    </div>
    <el-divider></el-divider>
    <div style="min-height: 50px;margin-bottom: 15px;">
      <div style="margin-bottom:5px;display: block;font-size: 17px;font-weight: 1000;">{{$t('analyze.budui')}}：
        <el-button size="mini" icon="el-icon-plus" style="float: right;margin-right: 20px;" @click="addTag('部队')">{{$t('analyze.add')}}</el-button>
      </div>
      <a-tag style="margin-top: 5px;" closable @close="log(item,'部队',index)" v-for="(item,index) in tagList.army" :key="index">{{ item }}</a-tag>
    </div>
    <el-divider></el-divider>
    <div style="min-height: 50px;margin-bottom: 15px;">
      <div style="margin-bottom:5px;display: block;font-size: 17px;font-weight: 1000;">{{$t('analyze.shangyeguanxi')}}：
        <el-button size="mini" icon="el-icon-plus" style="float: right;margin-right: 20px;" @click="addTag('商业')">{{$t('analyze.add')}}</el-button>
      </div>
      <a-tag style="margin-top: 5px;" closable @close="log(item,'商业',index)" v-for="(item,index) in tagList.business" :key="index">{{ item }}</a-tag>
    </div>
    <el-divider></el-divider>
    <div style="min-height: 50px;margin-bottom: 15px;">
      <div style="margin-bottom:5px;display: block;font-size: 17px;font-weight: 1000;">{{$t('analyze.miqielianxiren')}}：
        <el-button size="mini" icon="el-icon-plus" style="float: right;margin-right: 20px;" @click="addTag('密切')">{{$t('analyze.add')}}</el-button>
      </div>
      <a-tag style="margin-top: 5px;" closable @close="log(item,'密切',index)" v-for="(item,index) in tagList.contacts" :key="index">{{ item }}</a-tag>
    </div>
  </div>
</template>

<script>
export default {
  name:'tabBox',
  data(){
    return{
      tagList:{
        political:['领导','局长'],
        family:['爸爸','妈妈','姑姑','婶子'],
        army:['营长','连长','干事'],
        business:['经理','董事长'],
        contacts:[]
      }
    }
  },
  created(){
    // if(){

    // }
  },
  methods:{
    log(tagContent,tagType,index){
      // console.log(tagContent,tagType,index);
      
      switch (tagType) {
            case '政要':
              this.tagList.political.splice(index,1);
              break;
            case '家族':
              this.tagList.family.splice(index,1);
              break;
            case '部队':
              this.tagList.army.splice(index,1);
              break;
            case '商业':
              this.tagList.business.splice(index,1);
              break;
            case '密切':
              this.tagList.contacts.splice(index,1);
              break;
          
            default:
              break;
          }
    },
    addTag(tagType){
      this.$prompt(`${this.$t('analyze.shuru')}（${tagType}）${this.$t('analyze.keyWordL')}`, '', {
          confirmButtonText: this.$t('analyze.queding'),
          cancelButtonText: this.$t('analyze.quxiao'),
        }).then(({ value }) => {
          // this.$message({
          //   type: 'success',
          //   message: '你的邮箱是: ' + value
          // });
          switch (tagType) {
            case '政要':
              this.tagList.political.push(value);
              break;
            case '家族':
              this.tagList.family.push(value);
              break;
            case '部队':
              this.tagList.army.push(value);
              break;
            case '商业':
              this.tagList.business.push(value);
              break;
            case '密切':
              this.tagList.contacts.push(value);
              break;
          
            default:
              break;
          }
        }).catch(() => {
          // this.$message({
          //   type: 'info',
          //   message: '取消输入'
          // });       
        });
    }
  }
}
</script>

<style>

</style>